<div class="row">
  <div class="col-md-12">
    <sa-card title="评论详情" baCardClass="with-scroll">
      <form class="comment-form form-horizontal" [formGroup]="editForm" (ngSubmit)="submitComment()">
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">ID</label>
          <div class="col-sm-2">
            <div class="form-control">{{ comment.id }}</div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">所在文章</label>
          <div class="col-sm-5">
            <div class="form-control">
              <span *ngIf="comment.post_id !== CommentPostType.Guestbook;else guestbookTitle">{{ article ? article.title : '未知文章' }}</span>
              <ng-template #guestbookTitle><span>留言板</span></ng-template>
            </div>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(likes)">
          <label for="comment-likes" class="col-sm-1 form-control-label text-right">喜欢人数</label>
          <div class="col-sm-2">
            <input
              type="number" 
              id="comment-likes" 
              class="form-control" 
              placeholder="喜欢人数" 
              [formControl]="likes"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(is_top)">
          <label for="comment-is-top" class="col-sm-1 form-control-label text-right">是否置顶</label>
          <div class="col-sm-2">
            <select class="form-control c-select" id="comment-is-top" [formControl]="is_top">
              <option [ngValue]="false">不置顶</option>
              <option [ngValue]="true">置顶</option>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(state)">
          <label for="comment-state" class="col-sm-1 form-control-label text-right">状态</label>
          <div class="col-sm-2">
            <select class="form-control c-select" id="comment-state" [formControl]="state">
              <option [ngValue]="CommentState.Spam">垃圾评论</option>
              <option [ngValue]="CommentState.Deleted">已删除</option>
              <option [ngValue]="CommentState.Auditing">待审核</option>
              <option [ngValue]="CommentState.Published">审核通过</option>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_name)">
          <label for="comment-user-name" class="col-sm-1 form-control-label text-right">用户名</label>
          <div class="col-sm-2">
            <input
              type="text" 
              id="comment-user-name" 
              class="form-control" 
              placeholder="用户名" 
              [formControl]="user_name"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_email)">
          <label for="comment-user-email" class="col-sm-1 form-control-label text-right">用户邮箱</label>
          <div class="col-sm-2">
            <input
              type="email" 
              id="comment-user-email" 
              class="form-control" 
              placeholder="用户邮箱" 
              [formControl]="user_email"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_site)">
          <label for="comment-user-site" class="col-sm-1 form-control-label text-right">用户地址</label>
          <div class="col-sm-2">
            <input
              type="url" 
              id="comment-user-site" 
              class="form-control" 
              placeholder="用户的个人网址" 
              [formControl]="user_site"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">创建时间</label>
          <div class="col-sm-2">
            <div class="form-control">{{ comment.create_at | dataToLocale }}</div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">客户端信息</label>
          <div class="col-sm-5">
            <div class="form-control">
              <span *ngIf="comment.ip;else unknowIp">{{ comment.ip }}</span>
              <ng-template #unknowIp>
                <span class="text-muted">未知ip</span>
              </ng-template>
            </div>
            <br>
            <div class="form-control">
              <span *ngIf="comment.ip_location;else unknowIpLocation">{{ comment.ip_location.country }}{{ comment.ip_location.city }}</span>
              <ng-template #unknowIpLocation>
                <span class="text-muted">未知物理地址</span>
              </ng-template>
            </div>
            <br>
            <div class="form-control">
              <span>操作系统：</span>
              <span *ngIf="comment.agent" [innerHTML]="osParser(comment.agent)"></span>
              <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>浏览器：</span>
              <span *ngIf="comment.agent;else unknowUa">{{ browserParser(comment.agent) }}</span>
              <ng-template #unknowUa>
                <span class="text-muted">未知设备</span>
              </ng-template>
            </div>
          </div>
        </div>
        <div class="form-group row" [ngClass]="controlStateClass(pid)">
          <label for="PID" class="col-sm-1 form-control-label text-right">父级评论</label>
          <div class="col-sm-5">
            <select class="form-control c-select" [formControl]="pid">
              <option default [value]="0">无父级评论</option>
              <ng-template [ngIf]="comment.id && comments && comments.data.length">
                <option
                  *ngFor="let item of comments.data" 
                  [ngValue]="item.id"
                  [disabled]="item.id === comment.id"
                >
                  <span>ID：{{ item.id }}  -  {{ item.author.name }}：{{ item.content | truncate : 160 }}</span>
                </option>
              </ng-template>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(content)">
          <label for="comment-content" class="col-sm-1 form-control-label text-right">内容</label>
          <div class="col-sm-5">
            <sa-markdown-editor
              class="form-control comemnt-content" 
              title="评论内容"
              id="comment-content"
              [formControl]="content"
            ></sa-markdown-editor>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(extends)">
          <label for="comment_extends" class="col-sm-1 form-control-label text-right">自定义扩展</label>
          <div class="col-sm-5">
            <div class="comment-extend" *ngFor="let extend of extends.value; let i = index">
              <div class="input-group">
                <input
                  type="text" 
                  id="comment-name"
                  class="form-control"
                  placeholder="key" 
                  [(ngModel)]="extend.name"
                  [ngModelOptions]="{ standalone: true }"
                />
                <input
                  type="text" 
                  id="comment-name"
                  class="form-control"
                  placeholder="value" 
                  [(ngModel)]="extend.value"
                  [ngModelOptions]="{ standalone: true }"
                />
                <div class="input-group-append">
                  <button class="btn btn-default" (click)="delExtendItem(i)">
                    <i class="ion-md-trash"></i>
                  </button>
                </div>
              </div>
            </div>
            <a [href]="" class="btn btn-default btn-sm btn-block" (click)="addExtendItem()">增加扩展</a>
            <span class="help-block sub-little-text">可以为当前评论扩展自定义扩展属性</span>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-sm-1"></div>
          <div class="col-sm-11">
            <button type="submit" class="btn btn-success" [disabled]="!editForm.valid">提交更改</button>
            <span>&nbsp;&nbsp;</span>
            <a [href]="" class="btn btn-info" (click)="getCommentDetail()">刷新评论</a>
            <span>&nbsp;&nbsp;</span>
            <a
              class="btn btn-default"
              *ngIf="comment.post_id !== undefined && comment.post_id !== null"
              [routerLink]="['/comment/post/', comment.post_id]"
            >回到宿主页面评论列表</a>
          </div>
        </div>
      </form>
    </sa-card>
  </div>
</div>
